<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>图片转Word</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css"
          integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

    <!-- Custom styles -->
    <link href="/assets/dist/css/jquery.dm-uploader.min.css" rel="stylesheet">
    <link href="/assets/css/styles.css" rel="stylesheet">
</head>

<body>

<main role="main" class="container">

    <h1>图片转Word</h1>


    <div class="row">
        <div class="col-md-6 col-sm-12">

            <!-- Our markup, the important part here! -->
            <div id="drag-and-drop-zone" class="dm-uploader p-5">
                <h3 class="mb-5 mt-5 text-muted">拖拽文件到此</h3>

                <div class="btn btn-primary btn-block mb-5">
                    <span>选择文件</span>
                    <input type="file" title='选择文件'/>
                </div>
            </div><!-- /uploader -->

        </div>
        <div class="col-md-6 col-sm-12">
            <div class="card h-100">
                <div class="card-header">
                    文件列表
                </div>

                <ul class="list-unstyled p-2 d-flex flex-column col" id="files">
                    <li class="text-muted text-center empty">列表为空</li>
                </ul>
            </div>
        </div>
    </div><!-- /file list -->


    <div class="row">
        <div class="col-12">
            <div class="card h-100">
                <div class="card-header">
                    信息窗口
                </div>
                <ul class="list-group list-group-flush" id="debug">
                    <li class="list-group-item text-muted empty">加载插件....</li>
                </ul>
            </div>
        </div>
    </div> <!-- /debug -->

</main> <!-- /container -->


<script src="/assets/js/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
<script src="/assets/js/bootstrap.min.js"
        integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
        crossorigin="anonymous"></script>

<script src="/assets/dist/js/jquery.dm-uploader.min.js"></script>
<script src="/assets/js/demo-ui.js"></script>
<script src="/assets/js/demo-config.js"></script>

<!-- File item template -->
<script type="text/html" id="files-template">
    <li class="media">
        <div class="media-body mb-1">
            <p class="mb-2">
                <strong>%%filename%%</strong> - Status: <span class="text-muted">Waiting</span>
            </p>
            <div class="progress mb-2">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                     role="progressbar"
                     style="width: 0%"
                     aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
            <hr class="mt-1 mb-1"/>
        </div>
    </li>
</script>

<!-- Debug item template -->
<script type="text/html" id="debug-template">
    <li class="list-group-item text-%%color%%"><strong>%%date%%</strong>: %%message%%</li>
</script>
</body>
</html>
